// pages/video/video.js
// import { log } from 'console'
// import { log } from 'console';
// import { log } from 'console'
import request from '../../utils/request'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    navList: [],//标签列表
    navId: '',//当前选中标签id
    videoList: [],//视频列表
    currentId: "",//当前视频id
    videoPlayHistoryData:[],//[{id,currentTime}] //播放历史
    refresherFlag:true
  },

  // 赏花
async handlerToLower(){
    // console.log("上划了");
    // 1、获取 videoList 的数据
    const videoList = this.data.videoList
    if(videoList.length < 50){
      // 2、次函数的 调回执行的时候  拿到最新的数据
      const r = await request('/video/group',{id:this.data.navId},'GET')
      console.log(r,"r");
      // 3、更新视频列表
      this.setData({
        videoList: [...videoList, ...r.datas.map(item => item.data)] 
      })
    }
  },

  //下拉
  async handlerRefresh(){
     // 1、下拉的时候 出现。。。。  
    // 2、请求数据
    await this.getVideoList()
    //text一下啊
    setTimeout(() => {
      this.setData({
        refresherFlag:false
      })
    }, 2000);
  },


  //视频播放完成函数 清除历史播放的数据
  handlerEnd(event){
    const id = event.target.id
    const videoPlayHistoryData = this.data.videoPlayHistoryData
    //留下当前播放视频完成后的实例记录
    const obj = videoPlayHistoryData.filter(item => item.id !== id)
    this.setData({
      videoPlayHistoryData:obj
    })
  },

   // seekHistoryVideo 跳转到指定的视频 上次播放的位子
   seekHistoryVideo(id){
    // 1、获取当前点击的id
    // 2、获取历史数据 是否 有对应的id数据
    const obj = this.data.videoPlayHistoryData.find(item => item.id === id)
    if(obj){
      this.player.seek(obj.currentTime)
    }
    // 3、有 接着上一次位子播放 videoContext.seek(时间)
  },
  // 时间节点的回调函数
  getVideoTime(event){
    // 1、获取 当前播放的时间节点 event.detail.currentTime
    const currentTime = event.detail.currentTime
    // 2、获取 video id
    const id = event.target.id;
    // 3、整理好的单个对象 {id,currentTime}  每间隔250ms
    let  currentTimeObj = {
      id,
      currentTime,
    }
    // 4、通过id  去找到历史数据 是否有 
    const videoPlayHistoryData = this.data.videoPlayHistoryData
    const obj = videoPlayHistoryData.find(item => item.id === id)
    // console.log('去找到历史数据 是否有',obj)
    //  有就直接修改 没有就给他新增
    if(obj){
      obj.currentTime = currentTime
    } else {
      videoPlayHistoryData.push(currentTimeObj)
    }
    // 5、把更新一下历史数据结构
    this.setData({
      videoPlayHistoryData
    })
    // console.log('================')
    // console.log('时间节点的回调函数', event)
    // console.log('================')
  },



  //改变tap标签
  onChangeNav(e) {
    // console.log(e,"e");
    this.setData({
      //  data-id="{{item.id}}"
      navId: e.currentTarget.dataset.id
    })
    //改变nav标签后请求视频数据
    this.getVideoList();
  },

  //获取nav标签请求
  async getNavList() {
    const result = await request("/video/group/list", {}, "GET")
    // console.log(result,"navList");
    this.setData({
      navList: result.data.slice(0, 20),
      navId: result.data[0].id //默认选中第一条数据作为当前标签
    })
  },
  //获取视频数据请求
  /* 
 	需要先登录
	发请求需要携带用户cookie
 */
  async getVideoList() {
    const r = await request('/video/group', {
      id: this.data.navId
    }, 'GET')
    // console.log(r,"r");
    this.setData({
      videoList: r.datas.map(item => item.data)
    })
    // console.log('获取视频数据',r)
    // console.log('获取视频数据',this.data.videoList)
  },

  //点击视频
  clickMovie(e) {
    // console.log("点击视频", e);
    /* 
    首次点击视频播放
    点击其他视频 正在播放视频停止
    点击视频开始播放
    //如何判断第一次播放和其他此播放
    通过this.player
    */
    //保存当前点击组件的id
    const id = e.target.id
    //判断视频实列是否存在
    if (this.player) { //第二次
      // 如果当前点击的id 和 上一个id 不一样 才进去
      //判断点的是不是上一次点那个 如果不是开始操作
      //如果是这什么都不做
      if (this.data.currentId !== id) {
        // 如果有 就暂停上一个视频
        this.player.pause();
        // 创建新的 视频实例this.player赋值  在进行播放
        // 覆盖上一次的 视频实例
        this.player = wx.createVideoContext(id);
         // 跳转到 历史记录页面
         this.seekHistoryVideo(id);
        this.player.play();
        // 保存当前播放的id
        this.setData({
          currentId: id
        })
         // 当前的id 和 上一次的id 一样
      }else{

      }
    } else { //第一次播放
      //创建视频实列
      this.player = wx.createVideoContext(id)
      //播放视频
      this.player.play()
      //保存当前id
      this.setData({
        currentId: id
      })
    }


    //创建一个视频实列
    // this.player = wx.createVideoContext(id)
    // this.player.play()
    // this.player.pause()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    await this.getNavList()
    await this.getVideoList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享  微信原生提供
   */
  onShareAppMessage() {

  }
})